<template>
    <div style="width:100%">
        <!-- {{ data.checkedKeys }} -->
        <el-input v-model="filterText" style="width:100%;" placeholder="Filter keyword">
            <template #suffix>
                <el-icon class="el-input__icon f-cp">
                    <plus />
                </el-icon>
            </template>
        </el-input>

        <el-tree ref="treeRef" style="max-width: 300px" :default-expanded-keys="[]"
            :default-checked-keys="data.checkedKeys" class="filter-tree f-mt10" :data="treeData" :props="{
            children: 'children1',
            label: 'label',
        }" node-key="id" default-expand-all :filter-node-method="filterNode" @check-change="handleCheckChange">
            <template #default="{ node, data }">
                <div class="f-fcont">
                    <div class="f-f1  f-aic f-df">{{ node.label }}</div>
                    <div class=" f-jcc f-aic f-df">
                        <el-button text type="primary" @click.stop="append(data)">编辑</el-button>
                        <el-button text type="primary" @click="onDelete(node, data)">删除</el-button>
                    </div>
                </div>
            </template>
        </el-tree>
    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";

const filterText = ref('')

const treeRef = ref()
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
}

const onDelete = function () {
    ElMessageBox.confirm('确认要删除吗', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '关闭',
        callback: (action) => {
            if (action === 'confirm') {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
            } else {
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                })
            }
        },
    })
}
const handleCheckChange = (
    data,
    checked,
    indeterminate
) => {
    console.log(data, checked)
}

const data = reactive({
    checkedKeys: []// 这个只用于默认,不能用于更新
})

const treeData = [
    {
        id: 1,
        label: 'Level one 1',
        children1: [
            {
                id: 4,
                label: 'Level two 1-1',
                children1: [
                    { id: 9, label: 'Level three 1-1-1', },
                    { id: 10, label: 'Level three 1-1-2', },
                ],
            },
        ],
    },
    {
        id: 2,
        label: 'Level one 2',
        children1: [
            { id: 5, label: 'Level two 2-1', },
            { id: 6, label: 'Level two 2-2', },
        ],
    },

]
</script>